﻿<template>
  <div :class="className" :style="{'backgroundColor':datas.preview_color}">
    <!-- style -->
    <div v-html="css"></div>
    <!-- 商品组 列表 -->
    <div class="u_goodslist" v-if="datas.preview_color">

      <div class="u_goodslist_two" v-if="datas.sort_style.choose_icon == 1">
        <!-- 大图样式 -->
        <!-- 大图失效的 两种样式 是一样-->
        <div v-if="datas.list.data.length <= 0" style="width: 100%; height: 150px; text-align: center;">
          <img
            src="../../assets/images/blank.png"
            alt=""
            style="width: 5rem; margin: 2rem 0;"
          />
        </div>
        <div class="u_goodslist_two_child big u_goodslist_two_child_only" v-for="(item, index) in datas.list.data" :key="index" v-if="item && item.status != 2 || datas.disable_good != 0" @click.stop.prevent="gotoDetail(item)">
          <div class="Failure" v-if="datas.disable_good != 0 && item.status == 2" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已结束</div>
          </div>
          <img :src="item.goods_thumb || emptyImage" alt="" class="goodsImg">
          <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '50px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
            <!-- 限时抢购 -->
            <img src="../../assets/images/new_diy/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
            <!-- 包邮 -->
            <img src="../../assets/images/new_diy/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
            <!-- 热销 -->
            <img src="../../assets/images/new_diy/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
            <!-- 新上 -->
            <img src="../../assets/images/new_diy/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
            <!-- 推荐 -->
            <img src="../../assets/images/new_diy/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
            <!-- 自定义 -->
            <img :src="datas.good_tag.image" style="width: 100%;" v-if="datas.good_tag.choose_icon ==7" alt="">
          </div>
          <div class="twoChild_bottom">
            <div class="twoChild_top" v-if="checkTime(item.start_time)">
              <i class="iconfont icon-ht_qd_daojishi" style="margin: 0 5px;"></i>
              <van-count-down :time="(item.start_time *1000) - Date.parse(new Date())">
                <template #default="timeData">
                  <span class="time">{{ timeData.days }}</span>
                  <span class="colon">天</span>
                  <span class="time" style="width: 15px;">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="time">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="time">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
            <div class="Child_title" style="color: #fff;" v-if="show_list.includes('1')">
              {{item.title|escapeTitle}}
            </div>
            <div class="twoChild_line">
              <div class="posRed" style="width: 100%;">满{{item.member_num}}人成团</div>
            </div>
            <div class="Child_other">
              <!--<div class="oneChild_sales" style="color:#fff;" v-if="show_list.includes('7')">销量 8888</div>-->
              <!--<div class="oneChild_activity" style="color:#fff;" v-if="show_list.includes('5')">赠送xx爱心值</div>-->
            </div>
            <div class="Child_member_price" v-if="item.lottery_set && item.lottery_set.win_number">
              <span @click.stop="tohistoryGroup(item)" style="margin-right: 10px;" v-if="show_list.includes('4')">{{item.lottery_set.win_number}}人{{item.lottery_name}} ></span>
              <span v-if="show_list.includes('5') && item.lottery_set.show">未{{item.lottery_name}}奖励{{item.lottery_set.show}}</span>
            </div>
            <div class="Child_price">
              <div class="Child_now_price" :style="{width: datas.button_type == 0 ? '100%' : '70%'}">
                <span v-if="show_list.includes('3')"><em>{{$i18n.t('money')}}</em> {{item.group_price}}</span>
                <em class="oneChild_original_price" v-if="show_list.includes('2')">{{$i18n.t('money')}}{{item.goods_price}}</em></div>
              <div class="Child_buyBtn">
                <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                  <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                  <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                  <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_three" v-if="datas.sort_style.choose_icon == 2">
        <div v-if="datas.list.data.length <= 0" style="width: 100%; height: 150px; text-align: center;">
          <img
            src="../../assets/images/blank.png"
            alt=""
            style="width: 5rem; margin: 2rem 0;"
          />
        </div>
        <!-- 双排样式 -->
        <div class="u_goodslist_three_child " v-for="(item, index) in datas.list.data" :key="index" v-if="item && item.status != 2 || datas.disable_good != 0" @click.stop.prevent="gotoDetail(item)">
          <div class="Failure" v-if="datas.disable_good != 0 && item.status == 2" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已结束</div>
          </div>
          <div class="threeChild_top">
            <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '35px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
              <!-- 限时抢购 -->
              <img src="../../assets/images/new_diy/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
              <!-- 包邮 -->
              <img src="../../assets/images/new_diy/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
              <!-- 热销 -->
              <img src="../../assets/images/new_diy/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
              <!-- 新上 -->
              <img src="../../assets/images/new_diy/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
              <!-- 推荐 -->
              <img src="../../assets/images/new_diy/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
              <!-- 自定义 -->
              <img :src="datas.good_tag.image" style="width: 100%;" v-if="datas.good_tag.choose_icon ==7" alt="">
            </div>
            <img :src="item.goods_thumb || emptyImage" alt="" class="goodsImg">
            <div class="twoChild_topPos" v-if="checkTime(item.start_time)">
              <i class="iconfont icon-ht_qd_daojishi" style="margin: 0 5px;"></i>
              <van-count-down :time="(item.start_time *1000) - Date.parse(new Date())">
                <template #default="timeData">
                  <span class="time">{{ timeData.days }}</span>
                  <span class="colon">天</span>
                  <span class="time" style="width: 15px;">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="time">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="time">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
          </div>
          <div class="threeChild_b">
            <div class="Child_title" v-if="show_list.includes('1')">
              {{item.title|escapeTitle}}
            </div>
            <div class="Child_other">
              <!--<div class="oneChild_sales" v-if="show_list.includes('7')">销量 8888</div>-->
              <div class="twoChild_line">
                <div class="posRed" style="width: 100%;">满{{item.member_num}}人成团</div>
              </div>
              <!--<div class="oneChild_activity" v-if="show_list.includes('5')">赠送xx爱心值</div>-->
            </div>
            <div class="Child_member_price" @click.stop="tohistoryGroup(item)" v-if="show_list.includes('4') && item.lottery_set && item.lottery_set.win_number">{{item.lottery_set.win_number}}人{{item.lottery_name}} ></div>
            <div class="Child_member_price" style="margin-top: 5px; padding-bottom: 5px;" v-if="show_list.includes('5') && item.lottery_set && item.lottery_set.show">未{{item.lottery_name}}奖励{{item.lottery_set.show}}</div>
            <div class="Child_price">
              <div class="Child_now_price" :style="{width: datas.button_type == 1 || datas.button_type == 2 ? '50%' : '80%'}" v-if="show_list.includes('3')"><em>{{$i18n.t('money')}}</em> {{item.group_price }}</div>
              <div class="Child_now_price" v-if="!show_list.includes('3')"></div>
              <div class="Child_buyBtn">
                <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                  <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                  <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                  <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                </div>
              </div>
            </div>
            <div class="oneChild_original_price" v-if="show_list.includes('2')">{{$i18n.t('money')}}{{item.goods_price}}</div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_one" v-if="datas.sort_style.choose_icon == 3">
        <div v-if="datas.list.data.length <= 0" style="width: 100%; height: 150px; text-align: center;">
          <img
            src="../../assets/images/blank.png"
            alt=""
            style="width: 5rem; margin: 2rem 0;"
          />
        </div>
        <!-- 横排样式 -->
        <div class="u_goodslist_one_child " v-for="(item, index) in datas.list.data" :key="index" v-if="item && item.status != 2 || datas.disable_good != 0" @click.stop="gotoDetail(item)">
          <div class="Failure" v-if="datas.disable_good != 0 && item.status == 2" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已结束</div>
          </div>
          <div class="oneChild_left">
            <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '30px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
              <!-- 限时抢购 -->
              <img src="../../assets/images/new_diy/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
              <!-- 包邮 -->
              <img src="../../assets/images/new_diy/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
              <!-- 热销 -->
              <img src="../../assets/images/new_diy/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
              <!-- 新上 -->
              <img src="../../assets/images/new_diy/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
              <!-- 推荐 -->
              <img src="../../assets/images/new_diy/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
              <!-- 自定义 -->
              <img :src="datas.good_tag.image" style="width: 100%;" v-if="datas.good_tag.choose_icon ==7" alt="">
            </div>
            <img :src="item.goods_thumb || emptyImage" alt="">
            <div class="twoChild_topPos" v-if="checkTime(item.start_time)">
              <i class="iconfont icon-ht_qd_daojishi" style="font-size: 12px;"></i>
              <van-count-down :time="(item.start_time *1000) - Date.parse(new Date())">
                <template #default="timeData">
                  <span class="time">{{ timeData.days }}</span>
                  <span class="colon">天</span>
                  <span class="time" style="width: 15px;">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="time" style="width: 15px;">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="time" style="width: 15px;">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
          </div>
          <div class="oneChild_right">
            <div class="oneChild_r_flextop">
              <div class="Child_title" v-if="show_list.includes('1')">
                {{item.title|escapeTitle}}
              </div>
              <div class="Child_other">
                <!--<div class="oneChild_sales" v-if="show_list.includes('7')">销量 8888</div>-->
                <div class="twoChild_line">
                  <div class="posRed" style="width: 100%;">满{{item.member_num}}人成团</div>
                </div>
                <!--<div class="oneChild_activity" v-if="show_list.includes('5')">赠送xx爱心值</div>-->
              </div>
            </div>
            <div class="oneChild_r_flexbottom">
              <div class="Child_member_price" v-if="item.lottery_set && item.lottery_set.win_number" style="margin-bottom: 5px;">
                <span style="margin-right: 10px;" @click.stop="tohistoryGroup(item)" v-if="show_list.includes('4')">{{item.lottery_set.win_number}}人{{item.lottery_name}} ></span>
                <span v-if="show_list.includes('5') && item.lottery_set.show">未{{item.lottery_name}}奖励{{item.lottery_set.show}}</span>
              </div>
              <group-list-popup :item='item' v-if="show_list.includes('6')"></group-list-popup>
              <div class="Child_price">
                <div class="Child_now_price" :style="{width: datas.button_type == 1 || datas.button_type == 2 ? '50%' : '80%'}" v-if="show_list.includes('3')"><em>{{$i18n.t('money')}}</em> {{item.group_price }}</div>
                <div class="Child_now_price" v-if="!show_list.includes('3')"></div>
                <div class="Child_buyBtn">
                  <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                    <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                    <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                    <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                  </div>
                </div>
              </div>
              <div class="oneChild_original_price" v-if="show_list.includes('2')">{{$i18n.t('money')}}{{item.goods_price}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_four" v-if="datas.sort_style.choose_icon == 4">
        <div v-if="datas.list.data.length <= 0" style="width: 100%; height: 150px; text-align: center;">
          <img
            src="../../assets/images/blank.png"
            alt=""
            style="width: 5rem; margin: 2rem 0;"
          />
        </div>
        <!-- 三排排序样式 -->
        <div class="u_goodslist_four_child " v-for="(item, index) in datas.list.data" :key="index" v-if="item && item.status != 2 || datas.disable_good != 0" @click.stop.prevent="gotoDetail(item)">
          <div class="Failure" v-if="datas.disable_good != 0 && item.status == 2" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已结束</div>
          </div>
          <div class="threeChild_top">
            <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '25px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
              <!-- 限时抢购 -->
              <img src="../../assets/images/new_diy/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
              <!-- 包邮 -->
              <img src="../../assets/images/new_diy/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
              <!-- 热销 -->
              <img src="../../assets/images/new_diy/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
              <!-- 新上 -->
              <img src="../../assets/images/new_diy/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
              <!-- 推荐 -->
              <img src="../../assets/images/new_diy/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
              <!-- 自定义 -->
              <img :src="datas.good_tag.image" style="width: 100%;" v-if="datas.good_tag.choose_icon ==7" alt="">
            </div>
            <img :src="item.goods_thumb || emptyImage" alt="" class="goodsImg">
            <div class="twoChild_topPosThr" v-if="checkTime(item.start_time)">
              <i class="iconfont icon-ht_qd_daojishi" style="font-size: 12px;"></i>
              <van-count-down :time="(item.start_time *1000) - Date.parse(new Date())">
                <template #default="timeData">
                  <span class="time">{{ timeData.days }}</span>
                  <span class="colon">天</span>
                  <span class="time" style="width: 15px;">{{ timeData.hours }}</span>
                  <span class="colon" style="width: 15px;">:</span>
                  <span class="time">{{ timeData.minutes }}</span>
                  <span class="colon" style="width: 15px;">:</span>
                  <span class="time">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
          </div>
          <div class="threeChild_b">
            <div class="Child_title" v-if="show_list.includes('1')">
              {{item.title|escapeTitle}}
            </div>
            <div class="Child_other">
              <!--<div class="oneChild_sales" v-if="show_list.includes('5')">赠送xx爱心值</div>-->
              <!--<div class="oneChild_activity" v-if="show_list.includes('7')">销量 8888</div>-->
              <div class="twoChild_line">
                <div class="posRed" style="width: 100%; border-radius: 10px;">满{{item.member_num}}人成团</div>
              </div>
            </div>
            <div class="Child_member_price" @click.stop="tohistoryGroup(item)" v-if="show_list.includes('4') && item.lottery_set && item.lottery_set.win_number">{{item.lottery_set.win_number}}人{{item.lottery_name}} ></div>
            <div class="Child_member_price" style="margin-top: 5px; padding-bottom: 5px;" v-if="show_list.includes('5') && item.lottery_set && item.lottery_set.show">未{{item.lottery_name}}奖励{{item.lottery_set.show}}</div>
            <div class="Child_price">
              <div class="Child_now_price" :style="{width: datas.button_type == 0 || datas.button_type == 1 || datas.button_type == 2 ? '100%' : '75%'}" v-if="show_list.includes('3')"><em>{{$i18n.t('money')}}</em> {{item.group_price }}</div>
              <div class="Child_now_price" v-if="!show_list.includes('3')"></div>
              <div class="Child_buyBtn" v-if="datas.button_type != 1 && datas.button_type!=2">
                <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                  <!-- 三排没有样式1、样式2的购买按钮 -->
                  <!-- <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template> -->
                  <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                  <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                </div>
              </div>
            </div>
            <div class="oneChild_original_price" v-if="show_list.includes('2')">{{$i18n.t('money')}}{{item.goods_price}}</div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_four  u_goodslist_five" v-if="datas.sort_style.choose_icon == 5" @scroll="orderScroll">
        <div v-if="datas.list.data.length <= 0" style="width: 100%; height: 150px; text-align: center;">
          <img
            src="../../assets/images/blank.png"
            alt=""
            style="width: 5rem; margin: 2rem 0;"
          />
        </div>
        <!-- 三排滑动样式 -->
        <div class="u_goodslist_four_child u_goodslist_five_child" v-for="(item, index) in datas.list.data" :key="index" v-if="item && item.status != 2 || datas.disable_good != 0" @click.stop.prevent="gotoDetail(item)">
          <div class="Failure" v-if="datas.disable_good != 0 && item.status == 2" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已结束</div>
          </div>
          <div class="threeChild_top">
            <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '25px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
              <!-- 限时抢购 -->
              <img src="../../assets/images/new_diy/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
              <!-- 包邮 -->
              <img src="../../assets/images/new_diy/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
              <!-- 热销 -->
              <img src="../../assets/images/new_diy/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
              <!-- 新上 -->
              <img src="../../assets/images/new_diy/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
              <!-- 推荐 -->
              <img src="../../assets/images/new_diy/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
              <!-- 自定义 -->
              <img :src="datas.good_tag.image" style="width: 100%;" v-if="datas.good_tag.choose_icon ==7" alt="">
            </div>
            <img :src="item.goods_thumb || emptyImage" alt="" class="goodsImg">
            <div class="twoChild_topPosThr" v-if="checkTime(item.start_time)">
              <i class="iconfont icon-ht_qd_daojishi" style="font-size: 12px;"></i>
              <van-count-down :time="(item.start_time *1000) - Date.parse(new Date())">
                <template #default="timeData">
                  <span class="time">{{ timeData.days }}</span>
                  <span class="colon">天</span>
                  <span class="time" style="width: 15px;">{{ timeData.hours }}</span>
                  <span class="colon" style="width: 15px;">:</span>
                  <span class="time">{{ timeData.minutes }}</span>
                  <span class="colon" style="width: 15px;">:</span>
                  <span class="time">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
          </div>
          <div class="threeChild_b">
            <div class="Child_title" v-if="show_list.includes('1')">
              {{item.title|escapeTitle}}
            </div>
            <div class="Child_other">
              <!--<div class="oneChild_sales" v-if="show_list.includes('5')">赠送xx爱心值</div>-->
              <!--<div class="oneChild_activity" v-if="show_list.includes('7')">销量 8888</div>-->
              <div class="twoChild_line">
                <div class="posRed" style="width: 100%; border-radius: 10px;">满{{item.member_num}}人成团</div>
              </div>
            </div>
            <div class="Child_member_price" @click.stop="tohistoryGroup(item)" v-if="show_list.includes('4') && item.lottery_set && item.lottery_set.win_number">{{item.lottery_set.win_number}}人{{item.lottery_name}} ></div>
            <div class="Child_member_price" style="margin-top: 5px; padding-bottom: 5px;" v-if="show_list.includes('5') && item.lottery_set && item.lottery_set.show">未{{item.lottery_name}}奖励{{item.lottery_set.show}}</div>
            <div class="Child_price">
              <div class="Child_now_price" :style="{width: datas.button_type == 0 || datas.button_type == 1 || datas.button_type == 2 ? '100%' : '75%'}" v-if="show_list.includes('3')"><em>{{$i18n.t('money')}}</em> {{item.group_price }}</div>
              <div class="Child_now_price" v-if="!show_list.includes('3')"></div>
              <div class="Child_buyBtn" v-if="datas.button_type != 1 && datas.button_type!=2">
                <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                  <!-- 三排没有样式1、样式2的购买按钮 -->
                  <!-- <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template> -->
                  <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                  <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                </div>
              </div>
            </div>
            <div class="oneChild_original_price" v-if="show_list.includes('2')">{{$i18n.t('money')}}{{item.goods_price}}</div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_six" v-if="datas.sort_style.choose_icon == 6">
        <div v-if="datas.list.data.length <= 0" style="width: 100%; height: 150px; text-align: center;">
          <img
            src="../../assets/images/blank.png"
            alt=""
            style="width: 5rem; margin: 2rem 0;"
          />
        </div>
        <!-- 一大两小 -->
        <template v-for="(item, index) in datas.list.data" v-if="item && item.status != 2 || datas.disable_good != 0">
          <div class="u_goodslist_two" style="margin: 5px;" v-if="index % 3 == 0" :key="index">
            <!-- 大图样式 -->
            <div class="u_goodslist_two_child" @click.stop.prevent="gotoDetail(item)">
              <div class="Failure" v-if="datas.disable_good != 0 && item.status == 2" :class="[datas.disable_good == 1?'failure_cover':'']">
                <div class="Failure_text">已结束</div>
              </div>
              <img :src="item.goods_thumb || emptyImage" alt="" class="goodsImg">
              <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '50px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
                <!-- 限时抢购 -->
                <img src="../../assets/images/new_diy/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
                <!-- 包邮 -->
                <img src="../../assets/images/new_diy/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
                <!-- 热销 -->
                <img src="../../assets/images/new_diy/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
                <!-- 新上 -->
                <img src="../../assets/images/new_diy/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
                <!-- 推荐 -->
                <img src="../../assets/images/new_diy/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
                <!-- 自定义 -->
                <img :src="datas.good_tag.image" style="width: 100%;" v-if="datas.good_tag.choose_icon ==7" alt="">

              </div>
              <div class="twoChild_bottom">
                <div class="twoChild_top" v-if="checkTime(item.start_time)">
                  <i class="iconfont icon-ht_qd_daojishi" style="margin: 0 5px;"></i>
                  <van-count-down :time="(item.start_time *1000) - Date.parse(new Date())">
                    <template #default="timeData">
                      <span class="time">{{ timeData.days }}</span>
                      <span class="colon">天</span>
                      <span class="time" style="width: 15px;">{{ timeData.hours }}</span>
                      <span class="colon">:</span>
                      <span class="time">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="time">{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </div>
                <div class="Child_title" style="color: #fff;" v-if="show_list.includes('1')">
                  {{item.title|escapeTitle}}
                </div>
                <div class="Child_other">
                  <!--<div class="oneChild_sales" style="color:#fff;" v-if="show_list.includes('7')">销量 8888</div>-->
                  <div class="twoChild_line">
                    <div class="posRed" style="width: 100%; border-radius: 10px;">满{{item.member_num}}人成团</div>
                  </div>
                  <!--<div class="oneChild_activity" style="color:#fff;" v-if="show_list.includes('5')">赠送xx爱心值-->
                  <!--</div>-->
                </div>
                <div class="Child_member_price" v-if="item.lottery_set && item.lottery_set.win_number">
                  <span style="margin-right: 10px;" @click.stop="tohistoryGroup(item)" v-if="show_list.includes('4')">{{item.lottery_set.win_number}}人{{item.lottery_name}} ></span>
                  <span v-if="show_list.includes('5') && item.lottery_set.show">未{{item.lottery_name}}奖励{{item.lottery_set.show}}</span>
                </div>
                <div class="Child_price">
                  <div class="Child_now_price" :style="{width: datas.button_type == 0 ? '100%' : '70%'}">
                    <span v-if="show_list.includes('3')"><em>{{$i18n.t('money')}}</em> {{item.group_price }}</span>
                    <em class="oneChild_original_price" v-if="show_list.includes('2')">{{$i18n.t('money')}}{{item.goods_price}}</em></div>
                  <div class="Child_buyBtn">
                    <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                      <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                      <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                      <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="u_goodslist_three" v-if="index % 3 != 0" :key="index">
            <!-- 双排样式 -->
            <div class="u_goodslist_three_child" @click.stop.prevent="gotoDetail(item)">
              <div class="Failure" v-if="datas.disable_good != 0 && item.status == 2" :class="[datas.disable_good == 1?'failure_cover':'']">
                <div class="Failure_text">已结束</div>
              </div>
              <div class="threeChild_top">
                <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '35px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
                  <!-- 限时抢购 -->
                  <img src="../../assets/images/new_diy/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
                  <!-- 包邮 -->
                  <img src="../../assets/images/new_diy/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
                  <!-- 热销 -->
                  <img src="../../assets/images/new_diy/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
                  <!-- 新上 -->
                  <img src="../../assets/images/new_diy/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
                  <!-- 推荐 -->
                  <img src="../../assets/images/new_diy/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
                  <!-- 自定义 -->
                  <img :src="datas.good_tag.image || emptyImage" style="width: 100%;" v-if="datas.good_tag.choose_icon ==7" alt="">
                </div>
                <img :src="item.goods_thumb || emptyImage" alt="" class="goodsImg">
                <div class="twoChild_topPos" v-if="checkTime(item.start_time)">
                  <i class="iconfont icon-ht_qd_daojishi" style="margin: 0 5px;"></i>
                  <van-count-down :time="(item.start_time *1000) - Date.parse(new Date())">
                    <template #default="timeData">
                      <span class="time">{{ timeData.days }}</span>
                      <span class="colon">天</span>
                      <span class="time" style="width: 15px;">{{ timeData.hours }}</span>
                      <span class="colon">:</span>
                      <span class="time">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="time">{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </div>
              </div>
              <div class="threeChild_b">
                <div class="Child_title" v-if="show_list.includes('1')">
                  {{item.title|escapeTitle}}
                </div>
                <div class="Child_other">
                  <!--<div class="oneChild_sales" v-if="show_list.includes('7')">销量 8888</div>-->
                  <div class="twoChild_line">
                    <div class="posRed" style="width: 100%; border-radius: 10px;">满{{item.member_num}}人成团</div>
                  </div>
                  <!--<div class="oneChild_activity" v-if="show_list.includes('5')">赠送xx爱心值</div>-->
                </div>
                <div class="Child_member_price" @click.stop="tohistoryGroup(item)" v-if="show_list.includes('4') && item.lottery_set && item.lottery_set.win_number">{{item.lottery_set.win_number}}人{{item.lottery_name}} ></div>
                <div class="Child_member_price" style="margin-top: 5px; padding-bottom: 5px;" v-if="show_list.includes('5') && item.lottery_set && item.lottery_set.show">未{{item.lottery_name}}奖励{{item.lottery_set.show}}</div>
                <div class="Child_price">
                  <div class="Child_now_price" :style="{width: datas.button_type == 1 || datas.button_type == 2 ? '50%' : '80%'}" v-if="show_list.includes('3')"><em>{{$i18n.t('money')}}</em> {{item.group_price}}</div>
                  <div class="Child_now_price" v-if="!show_list.includes('3')"></div>
                  <div class="Child_buyBtn">
                    <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                      <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                      <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                      <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                    </div>
                  </div>
                </div>
                <div class="oneChild_original_price" v-if="show_list.includes('2')">{{$i18n.t('money')}}{{item.goods_price}}</div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div style="clear: both;"></div>

      <div :style="{ backgroundColor: datas.preview_color }" v-if="datas.sort_style.choose_icon != 5">
        <div class="loadMore" v-if="isLoadMore" @click="getMoreData">
          {{ $i18n.t("加载更多") }}
        </div>
        <div class="loadMore" v-if="lastIndex == index && allLoaded">{{ $i18n.t("没有更多了") }}~~</div>
      </div>
    </div>

  </div>
</template>

<script>
import emptyImage from "../../assets/images/new_diy/image.png";
import groupListPopup from "views/goods/group/groupListPopup";
// 自定义样式
const css = function () {
  if(this.datas.preview_color) {
    const {
      preview_color,
      padding_top,
      padding_bottom,
      padding_left,
      padding_right,
      item_radius,
      show_shadow,
      show_border,
      border_color,
      button_bg_color,
      button_color,
    } = this.datas;

    return `
        .component-${this.id} .u_goodslist{
            background-color: ${preview_color};
            padding-top: ${padding_top}px;
            padding-bottom: ${padding_bottom}px;
            padding-left: ${padding_left}px;
            padding-right: ${padding_right}px;
        }

        .component-${this.id} .u_goodslist .Child_buyBtn {
            color: ${button_color}
        }

        .component-${this.id} .u_goodslist .buyBtn_1 {
            background-color: ${button_bg_color};
        }

        .component-${this.id} .u_goodslist .Child_buyBtn .buyBtn_2, .component-${this.id} .u_goodslist .Child_buyBtn .buyBtn_4, .component-${this.id} .u_goodslist .Child_buyBtn .buyBtn_6 {
            border: solid 0.5px ${button_bg_color};
            color: ${button_bg_color};
        }

        .component-${this.id} .u_goodslist .buyBtn_3, .component-${this.id} .u_goodslist .buyBtn_5 {
            color: ${button_color};
            background-color: ${button_bg_color};
        }

        .component-${this.id} .u_goodslist .buyBtn_4, .component-${this.id} .u_goodslist .buyBtn_6 {
            color: ${button_color};
            border: solid 0.5px ${button_color};
        }

        .component-${this.id} .u_goodslist_two_child, .component-${this.id} .u_goodslist_three_child, .component-${this.id} .u_goodslist_four_child, .component-${this.id} .u_goodslist_one_child {
            border-radius: ${item_radius}px;
        }

        .component-${this.id} .u_goodslist .Failure {
            border-radius: 0;
        }

        .component-${this.id} .u_goodslist_one_child .Failure {
            border-radius: 0;
        }

        .component-${this.id} .u_goodslist_two_child.big, .component-${this.id} .u_goodslist_one_child  {
            border: ${show_border?'1':'0'}px solid ${border_color};
            box-shadow: ${show_shadow?'1':'0'}px ${show_shadow?'1':'0'}px ${show_shadow?'5':'0'}px ${border_color};
        }

        .component-${this.id} .u_goodslist_one_child .oneChild_right {
            border-radius: 0 ${item_radius}px ${item_radius}px 0;
        }
    `;
  }
};

export default {
  data() {
    return {
      emptyImage,
      isLoadMore: true, //true 可以加载更多
      page: 1,
      total_page: 0,
      allLoaded: false, // 全部数据已经加载完成
      alreadyHandleArray: [],
      arrIndex: 1,
      integral: '',
      per_page: 12,
    };
  },
  components:{groupListPopup },
  props: ['id', 'datas', 'styles', 'languages','isBottom','lastIndex','index','page_id','component_key','tabcontrol'],
  computed: {
    css() {
      return '<style>' + css.call(this) + '</style>';
    },
    className() {
      const name = ['component-wrapper', `component-${this.id}`];
      return name;
    },
    show_list() {
      console.log(this.datas.content_list.length > 0 && this.datas.content_list[0] instanceof Object);
      if(this.datas.content_list.length > 0 && this.datas.content_list[0] instanceof Object) {
        return this.handle_list(this.datas.content_list);
      }else {
        return this.datas.content_list;
      }
    }
  },

  methods: {
    tohistoryGroup(item) {
      this.$router.push(this.fun.getUrl("historyGroup",{},{group_id: item.id}));
    },
    handle_list(list) {
      let handleDatas = [];
      if(list) {
        list.map((item, i) => {
          handleDatas[i] = item.value;
        });
      }
      return handleDatas;
    },
    checkTime(start) {
      if(start) {
        // let time = new Date(start.replace(/-/g, "/"));
        // time = time.getTime() / 1000;
        if (new Date().getTime()/1000 < start) {
          return true;
        } else {
          return false;
        }
      }},
    //商品跳转
    gotoDetail(good) {
      let json = { id: good.id };
      if(good.store_id){
        json.store_id = good.store_id;
      }
      this.$router.push(this.fun.getUrl("ywmGroup", json));
    },
    orderScroll() {
      let fixedDom = document.getElementsByClassName(`u_goodslist_five_child-${this.id}`)[0];
      let list = this.datas.list.data ? this.datas.list.data : this.datas.list;
      if (fixedDom.getClientRects()[0].x - fixedDom.offsetLeft < -(list.length - 5) * (this.clientWidth / 3)) {
        // 加载更多
        if (this.isLoadMore) {
          this.getMoreData();
        }
      }
    },
    // 获取更多数据
    getMoreData() {
      if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length >= this.per_page) {
        this.datas.list.data = this.datas.list.data.concat(
          this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))
        ); //数组拼接
        this.arrIndex = this.arrIndex + 1;

        if (!this.fun.isTextEmpty(this.datas.get_number) && this.datas.list.data.length > this.datas.get_number) {
          this.datas.list.data = this.datas.list.data.slice(0, this.datas.get_number);
          this.isLoadMore = false;
          this.allLoaded = true;
        }
        return;
      }
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page: this.page,
          decorate_id: this.page_id || this.$store.state.temp.item.id,
          component_id: this.id,
          component_key: this.component_key
        };
        if (this.tabcontrol) {
          json.component_info = JSON.stringify({ list_key: this.index });
        }
        $http.get('home-page.get-decorate-page', json, 'loading').then(
          response => {
            if (response.result === 1) {
              if (this.tabcontrol) {
                let data = response.data[0].remote_data.list;
                this.page = data.current_page;
                this.alreadyHandleArray = this.alreadyHandleArray.concat(data.data);
                this.datas.list.data = this.datas.list.data.concat(
                  this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))
                ); //数组拼接
                this.arrIndex = this.arrIndex + 1;
              } else {
                this.page = response.data.remote_data.list.current_page;
                this.datas.list.data = this.datas.list.data.concat(response.data.remote_data.list.data); //数组拼接
                this.arrIndex = this.arrIndex + 1;
              }

              if (this.page < this.total_page) {
                this.isLoadMore = true;
              } else {
                this.allLoaded = true;
              }

              if (!this.fun.isTextEmpty(this.datas.get_number) && this.datas.list.data.length > this.datas.get_number) {
                this.datas.list.data = this.datas.list.data.slice(0, this.datas.get_number);
                this.isLoadMore = false;
                this.allLoaded = true;
              }
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
              this.allLoaded = true;
            }
          },
          function(response) {
            console.error(response);
            // error callback
          }
        );
      }
    },
  },
  watch: {
    isBottom: function(newVal, oldVal) {
      // this.lastIndex == this.index判断商品列表是最后一个组件
      if (newVal && this.lastIndex == this.index && this.datas.sort_style.choose_icon != 5 && this.isLoadMore) {
        this.getMoreData();
      }
    }
  },
  mounted() {
    console.log('===========',this.datas)
    if(this.datas.list.data){
      this.total_page = this.datas.list.last_page;
      this.per_page = this.datas.list.per_page || 12;
      this.page = this.datas.list.current_page;
      if (this.total_page <= this.page) {
        this.isLoadMore = false;
        this.allLoaded = true;
      }
      this.alreadyHandleArray = this.datas.list.data;
      this.datas.list.data = this.datas.list.data.slice(0, this.per_page);
    }
  }
};
</script>

<style lang="scss" scoped>
  // 默认
  .component-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: left;

    ul {
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      margin: 12/37.5rem 12/37.5rem 3/37.5rem;
      padding: 0;
      width: 100%;
    }
  }

  .u_goodslist {
    /* padding: 0 12px; */
    width: 100%;

    .Failure {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;

      .Failure_text {
        width: 90px;
        height: 90px;
        background-color: #797979;
        border-radius: 100%;
        color: #fff;
        font-size: 20px;
        line-height: 90px;
        text-align: center;
      }
    }

    .u_goodslist_one {
      .u_goodslist_one_child {
        width: 100%;
        padding: 7px 10px;
        display: flex;
        position: relative;
        margin-bottom: 10px;
        background: #fff;

        .failure_cover {
          width: 36%;
        }

        .oneChild_left {
          width: 36%;
          height: 8rem;
          overflow: hidden;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .oneChild_right {
          flex: 1;
          padding-left: 8px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background-color: white;
          padding-right: 4px;

          .oneChild_r_flextop {
            margin-top: 4px;
            margin-bottom: 5px;
          }

          .oneChild_r_flexbottom {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            margin-bottom: 4px;
          }
        }
      }

      .u_goodslist_one_child:last-child {
        margin-bottom: 0;
      }
    }

    .u_goodslist_two {
      .u_goodslist_two_child {
        width: 100%;
        min-height: 300px;
        overflow: hidden;
        position: relative;
        margin: 0 auto 10px;

        .goodsImg {
          width: 100%;

          /* height: 350px; */
          overflow: hidden;
        }

        .twoChild_bottom {
          position: absolute;
          width: 100%;
          background: rgba(0, 0, 0, 0.6);
          left: 0;
          bottom: 0;
          color: #fff;
          padding: 10px;

          .Child_member_price {
            margin-top: 5px;
          }

          .oneChild_original_price {
            color: #fff;
            font-weight: 400;
          }

          .buyBtn_2,
          .buyBtn_4,
          .buyBtn_6 {
            /* border-color: #fff; */

            /* color: #fff; */
          }

          .twoChild_top {
            display: flex;
            align-items: center;
            margin-bottom: 5px;

            .time {
              display: inline-block;
              width: 19px;
              height: 19px;
              border-radius: 5px;
              background: #fff;
              text-align: center;
              line-height: 19px;
              font-size: 12px;
              color: #ff2c29;
              margin: 3px;
            }
          }
        }
      }

      .u_goodslist_two_child_only:last-child {
        margin: 0 auto;
      }
    }

    .u_goodslist_three {
      justify-content: space-between;
    }

    .u_goodslist_three,
    .u_goodslist_four {
      display: flex;
      flex-wrap: wrap;

      .u_goodslist_three_child,
      .u_goodslist_four_child {
        width: 46.5%;
        height: 50%;

        /* padding: 0 5px; */
        margin: 5px;
        overflow: hidden;
        position: relative;

        .threeChild_top {
          width: 100%;
          height: 11rem;
          overflow: hidden;
          position: relative;

          .goodsImg {
            width: 100%;
            height: 100%;
          }
        }

        .threeChild_b {
          background-color: white;
          padding: 6px 4px;

          .Child_other {
            margin-top: 2px;
            margin-bottom: 8px;
          }
        }
      }

      .u_goodslist_three_child .failure_cover {
        height: 11rem;
        width: 100%;

        /* margin: 0 5px; */
      }

      .u_goodslist_four_child .failure_cover {
        height: 7rem;
        width: 100%;

        /* margin: 0 5px; */

        .Failure_text {
          width: 60px;
          height: 60px;
          font-size: 14px;
          line-height: 60px;
        }
      }

      .u_goodslist_three_child .Failure {
        width: 100%;

        /* margin: 0 5px; */
      }

      .u_goodslist_four_child .Failure {
        width: 100%;

        /* margin: 0 5px; */
      }
    }

    .u_goodslist_four .Child_other {
      margin-bottom: 4px !important;
    }

    .u_goodslist_four_child {
      width: 30.3% !important;

      /* margin-right: 10px; */
      .threeChild_top {
        width: 100% !important;
        height: 7rem !important;
      }

      .Child_price,
      .Child_now_price {
        /* height: 20px; */
        word-break: break-all;
        line-height: 20px;
      }

      .Child_buyBtn {
        .buyBtn {
          height: 20px;
          line-height: 20px;
        }

        .buyBtn_3,
        .buyBtn_4,
        .buyBtn_5,
        .buyBtn_6 {
          width: 20px;
        }
      }
    }

    .u_goodslist_four_child:nth-child(3n) {
      margin-right: 0;
    }

    .u_goodslist_five {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: scroll;

      .u_goodslist_five_child {
        flex-shrink: 0;
        position: relative;
      }
    }

    .good_Attributes {
      position: absolute;
      top: 4px;
      left: 4px;
      display: flex;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .Child_title {
      font-size: 14px;
      line-height: 20px;
      height: 40px;
      color: #000;
      font-weight: bold;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .Child_other {
      display: flex;
      flex-direction: column;
      margin-top: 5px;
      font-size: 12px;
      flex-wrap: wrap;

      .oneChild_sales {
        color: #666;
        margin-right: 14px;
      }

      .oneChild_activity {
        color: #3b3b3b;
      }
    }

    .Child_member_price {
      color: #ff2c29;

      /* height: 12px; */
      line-height: 12px;
      font-size: 12px;
      font-weight: bold;
    }

    .Child_price {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // height: 26px;
      line-height: 26px;

      .Child_now_price {
        color: #ff2c29;
        font-weight: bold;
        font-size: 15px;
        word-break: break-all;

        em {
          font-size: 12px;
        }
      }
    }

    .oneChild_original_price {
      /* height: 12px; */
      text-decoration: line-through;
      color: #999;
      line-height: 12px;
      font-size: 12px;
      word-break: break-all;
    }

    .Child_buyBtn {
      text-align: center;
      font-weight: bold;

      /* color: #fff; */
      .buyBtn {
        height: 26px;
        border-radius: 13.5px;
      }

      .buyBtn_1 {
        width: 76px;

        /* background-color: #3b3b3b; */
      }

      .buyBtn_2 {
        width: 76px;

        /* border: solid 0.5px #363636; */

        /* color: #363636; */
      }

      .buyBtn_3,
      .buyBtn_4,
      .buyBtn_5,
      .buyBtn_6 {
        border-radius: 100%;
        width: 26px;

        i {
          font-size: 12px;
          font-weight: 400;
        }
      }

      .buyBtn_3,
      .buyBtn_5 {
        /* color: #fff; */

        /* background-color: #3b3b3b; */
      }

      .buyBtn_4,
      .buyBtn_6 {
        /* color: #3b3b3b; */

        /* border: solid 0.5px #3b3b3b; */
      }

      .buyBtn_5,
      .buyBtn_6 {
        i {
          font-size: 18px;
        }
      }
    }

    .u_goodslist_one .good_Attributes,
    .u_goodslist_three .good_Attributes {
      width: 60px;
      height: 24px;
    }

    .u_goodslist_two .good_Attributes {
      width: 100px;
      height: 40px;
    }

    .u_goodslist_four .good_Attributes,
    .u_goodslist_five .good_Attributes {
      width: 45px;
      height: 18px;
    }
  }

  .twoChild_line {
    width: 100%;
    height: 18px;

    /* background-color: #f1f1f1; */

    /* border-radius: 9px; */
    margin-top: 8px;
    text-align: left;

    /* color: #ffffff; */
    line-height: 18px;
    font-size: 12px;
    position: relative;

    /* text-indent: 5px; */
    .posRed {
      line-height: 16px;
      height: 100%;
      color: #ff2c29;

      /* border-radius: 6px; */
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
  }

  .twoChild_topPos {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;

    /* justify-content: space-around; */
    .time {
      display: inline-block;
      width: 18px;
      height: 18px;
      text-align: center;
      font-size: 12px;
      background-color: #fff;
      border-radius: 5px;
      align-items: center;
      justify-content: center;
      color: #ff2c29;
      margin: 2px;
    }
  }

  .twoChild_topPosThr {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;

    /* justify-content: space-around; */
    .time {
      text-align: center;
      display: inline-block;
      width: 15px;
      height: 18px;
      font-size: 11px;
      background-color: #fff;
      border-radius: 5px;
      align-items: center;
      justify-content: center;
      color: #ff2c29;
      margin: 1px;
    }
  }

  .u_goodslist .u_goodslist_six {
    .u_goodslist_two {
      clear: both;
    }

    .u_goodslist_three {
      display: block;
      width: 50%;
      float: left;
    }

    .u_goodslist_three_child {
      width: 94%;
      height: 100%;
    }

    .threeChild_b {
      .Child_title {
        min-height: 37px;
      }
    }
  }

  .colon {
    color: #fff;
  }

  .loadMore {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    clear: both;
  }
</style>
